<template>
  <div class="app-container">
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="resetClick">
      <!-- <template #is_test="scope">
        <el-select v-model="searchParam[scope.prop]" @change="setSearchParam()" v-bind="scope">
          <template v-for="option in isTestList" :key="option.value">
            <el-option :label="option.label" :value="option.value" />
          </template>
        </el-select>
      </template> -->
      <template #status="scope">
        <el-select v-model="searchParam[scope.prop]" @change="setSearchParam()" v-bind="scope">
          <template v-for="option in statusList" :key="option.value">
            <el-option :label="option.label" :value="option.value" />
          </template>
        </el-select>
      </template>
    </page-search>
    <PageContent ref="contentRef" class="overflow-hidden" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick"
      >
      <template #has_deposited="scope">
        <el-tag :type="+scope.row[scope.prop]?'success':'danger'">
          {{$t( +scope.row[scope.prop]?'status.1':'status.2') }}
        </el-tag>
      </template>
      <template #balance="col">
        <el-table-column v-bind="col" :label="col.label" :sort-method="sortBalance"></el-table-column>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row[scope.prop] === 'active'?'success':'danger'">
          {{$t( scope.row[scope.prop] === 'active'?'status.48':'status.49') }}
        </el-tag>
      </template>
      <template #is_test="scope">
        <el-tag :type="+scope.row[scope.prop]?'danger':'success'">
          {{$t( +scope.row[scope.prop]?'status.1':'status.2') }}
        </el-tag>
      </template>
    </PageContent>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick" />

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick" />
   
    <!-- 更新密码 -->
    <passwordModal ref="passwordRef"  @submit-click="handleQueryClick" />

    <!-- 更新支付密码 -->
    <payPasswordModal ref="payPasswordRef"  @submit-click="handleQueryClick" />

    <!-- <transferBalance ref="trBaRef" @submit-click="handleSubmitClick" /> -->
    <el-dialog v-model="infoVisible" @close="infoVisible=false" width="700px" :title="$t('title.29')">
      <div>
        <el-descriptions title="" column="4" direction="vertical" border>
          <el-descriptions-item :rowspan="2" :span="1" label="头像" align="center">
            <el-image class="size-60px" :src="info.profile_photo_path" />
          </el-descriptions-item>
          <el-descriptions-item :label="$t('label.9')" align="center">{{info.username}}</el-descriptions-item>
          <el-descriptions-item :label="$t('label.106')" align="center">
            <el-tag :type="+info.is_test?'danger':'success'">
              {{$t( +info.is_test?'status.1':'status.2') }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('label.53')" align="center">{{info.currency_code}} </el-descriptions-item>
          <!-- <el-descriptions-item label="手机号" align="center">{{info.phone_number}}</el-descriptions-item>
          <el-descriptions-item label="邮箱" align="center">{{info.email || '--'}}</el-descriptions-item> -->
          <el-descriptions-item :label="$t('label.3')" align="center"> {{info.balance}} </el-descriptions-item>
          <el-descriptions-item :label="$t('label.109')" align="center">{{info.bonus}} </el-descriptions-item>
          <el-descriptions-item :label="$t('label.110')" align="center">{{info.earnings}} </el-descriptions-item>
          <el-descriptions-item label="IP" align="center">{{info.ip_address}} </el-descriptions-item>
          <el-descriptions-item :label="$t('label.23')" align="center">{{info.status}} </el-descriptions-item>
          <el-descriptions-item label="VIP" align="center">{{info.vip_level || '--'}} </el-descriptions-item>
          <el-descriptions-item :label="$t('label.5')" align="center">
            <el-tag :type="info.has_deposited?'success':'danger'">
              {{$t( info.has_deposited?'status.1':'status.2') }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="$t('label.38')" align="center">
            {{ moment(info.created_at).format('YYYY-MM-DD HH:mm:ss') }}
          </el-descriptions-item>


        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import passwordModal from './form-modal/passwordModal.vue'
import payPasswordModal from './form-modal/payPasswordModal.vue'
import usePage from "@/hooks/usePage";
import { tableHeightAutoAdjust } from '@/utils/common'
import { onMounted } from "vue";
defineOptions({
  name: "clientUser",
  inheritAttrs: false,
});
const { t } = useI18n();

const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  console.log(row)
  if (!row.email) {
    row.email = null
  }
  editModalRef.value?.setModalVisible(row);
}

const passwordRef = ref(null);
const payPasswordRef = ref(null);

const gridOptions = reactive({})

// const trBaRef = ref()
const info = ref({})
const handleOperatClick = ({ name, column, row }) => {
  console.log('handleOperatClick', name, row);
  if (name === 'view') {
    info.value = row
    infoVisible.value = true
  }
  if(name === 'password' && passwordRef.value){
    passwordRef.value.initModal(row);
  }
  if(name === 'payment_password' && payPasswordRef.value){
    payPasswordRef.value.initModal(row);
  }
}
const searchParam = ref({

})
const setSearchParam = () => {
  searchRef.value.setParams(searchParam.value)
}
const resetClick = () => {
  for (let i in searchParam.value) {
    searchParam.value[i] = ''
  }
  handleResetClick()
}

const statusList = ref([
  {
    label: t('status.48'),
    value: 'active',
  },
  {
    label: t('status.49'),
    value: 'inactive',
  }
])

const isTestList = ref([
  {
    label: t('status.1'),
    value:1,
  },{
    label:'',
    value:t('status.2')
  }
])

const sortBalance = (obj1, obj2, e) => {
  let val1 = obj1.balance
  let val2 = obj2.balance
  return Number(val1) - Number(val2)
}
const infoVisible = ref(false);
onMounted(() => {
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
});
</script>

<style></style>